<template>
  <div>
    <div class="article_all">
      <div style="width: 100%;">
        <div class="article_body">
          <el-table :data="userList" height="460px" style="margin-top: 16px;font-size: 14px;"
                    :header-cell-style="{ background: '#EBEEF2' }" :row-style="{ height: '80px' }"
                    v-loading="loading">
            <el-table-column prop="userName" label="用户名" min-width="150"></el-table-column>
            <el-table-column prop="userEmail" label="用户邮箱" min-width="180"></el-table-column>
            <el-table-column prop="userAge" label="年龄" min-width="80"></el-table-column>
            <el-table-column prop="userSex" label="性别" min-width="80"></el-table-column>
            <el-table-column prop="userFrom" label="国家" min-width="120"></el-table-column>
            <el-table-column prop="userRegisterTime" label="注册时间" min-width="160"></el-table-column>
            <el-table-column prop="dept_id" label="学院ID" min-width="120"></el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="onEditUser(scope.row)">
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button size="mini" type="text" @click="onDeleteUser(scope.row)" style="color: red;">
                  <i class="el-icon-delete"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                    :current-page.sync="PageNumber"
                    :page-size="PageSize"
                    layout="prev, pager, next, total"
                    :total="total"
                    background
                    @current-change="handlePageChange"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {adminuserlist} from "@/api/api";

export default {
    name: 'Laucher',
    data() {
        return {
            userList: [],
            PageNumber: 1,
            PageSize: 5,
            total: 0,
            loading: false
        }
    },
    methods: {
        async getUserlist() {
            this.loading = true;
            try {
                const response = await adminuserlist({
                    PageNumber: this.PageNumber,
                    PageSize: this.PageSize
                });
                console.log(response.data);
                if (response.data.message === "成功") {
                    this.userList = response.data.data.list;
                    this.total = response.data.data.total;
                }
            } catch (error) {
                console.error('获取用户列表失败:', error);
            } finally {
                this.loading = false;
            }
        },
        handlePageChange(page) {
            this.PageNumber = page;
            this.getUserlist();
        }
    },
    created() {
        this.getUserlist();
    }
}
</script>

<style scoped>
.article_head_left ::v-deep .el-input--suffix .el-input__inner {
  border-radius: 10px;
  box-shadow: 0 0 1px #7e72f2;
}
.pagination ::v-deep .el-pagination .el-pager .number.active {
  background-color: #456ddc !important;
  border-color: #456ddc !important;
  color: white !important;
}
.pagination ::v-deep .el-pagination .el-pager .number {
  color: #456ddc !important;
}
.pagination ::v-deep .el-pagination {
  position: relative;
}
.pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: right;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #456ddc;
  border-color: #456ddc;
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #456ddc;
  border-color: #456ddc;
}
::v-deep .el-checkbox__inner:hover {
  border-color: #456ddc;
}
</style>
